<template>
  <div class="guideList">
    <div class="number">
      <ai-panel>
        <div slot="title">
          <span>{{ currDate | timeFormat }}</span>
        </div>
        <div slot="picker" class="picker">
          <div class="block">
            <el-date-picker v-model="currDate"
                            align="right"
                            type="date"
                            placeholder="选择日期"
                            size="mini"
                            @change="dateChanged"
                            :clearable="false"
                            :picker-options="pickerOptions1">
            </el-date-picker>
          </div>
        </div>
        <div slot="content">
          <div class="guideInfo">
            <el-row>
              <el-col :span="6">
                <div class="grid-content bg-purple-dark">
                  <div class="item">
                    <div class="detail">
                      <span class="num">
                          <count-up :startVal="0"
                                    :endVal="guideNum || 0 "
                                    :decimals="0"
                                    :duration="0.5"
                                    :options="cuConfig">
                          </count-up>
                        </span>
                      <span class="unit">人</span>
                    </div>
                    <div class="txt text-label">当日导购店员</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-dark">
                  <div class="item">
                    <div class="detail">
                      <span class="num">
                          <count-up :startVal="0"
                                    :endVal="receptNum || 0"
                                    :decimals="0"
                                    :duration="0.5"
                                    :options="cuConfig">
                          </count-up>
                        </span>
                      <span class="unit">人</span>
                    </div>
                    <div class="txt text-label">总接待人数</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-dark">
                  <div class="item">
                    <div class="detail">
                      <span class="num">
                          <count-up :startVal="0"
                                    :endVal="minutes || 0"
                                    :decimals="0"
                                    :duration="0.5"
                                    :options="cuConfig">
                          </count-up>
                        </span>
                      <span class="unit">分</span>
                      <span class="num">
                          <count-up :startVal="0"
                                    :endVal="seconds || 0"
                                    :decimals="0"
                                    :duration="0.5"
                                    :options="cuConfig">
                          </count-up>
                        </span>
                      <span class="unit">秒</span>
                    </div>
                    <div class="txt text-label">单顾客平均接待时间</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-dark">
                  <div class="item">
                    <div class="detail">
                      <span class="num">
                          <count-up :startVal="0"
                                    :endVal="guideRate || 0"
                                    :decimals="2"
                                    :duration="0.5"
                                    :options="cuConfig">
                          </count-up>
                        </span>
                      <span class="unit">%</span>
                    </div>
                    <div class="txt text-label">导购转化率</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </ai-panel>
    </div>
    <div class="guiders">
      <div class="hasdata" v-if="guide_list &&  guide_list.length>0">
        <div class="guidePerson"
             v-for="(item, index) in guide_list"
             @click="selectItem(item)"
             :class="[ item.reception_number > 0 ? 'highlight' : '' ]"
             :key="index">
            <div class="left">
              <img class="guideImg" :src="item.portrait" alt="" width="50" height="50">
            </div>
            <div class="right">
              <div class="guider">
                <span class="guideName">{{item.name}}</span>
                <span class="guideNumber">(编号: {{item.id}})</span>
              </div>
              <div class="reception" v-if="item.reception_number > 0">
                <span class="n">{{item.reception_number}}</span><span class="txt">接待顾客</span>
                <span class="n">{{(item.conversion_rate ? (item.conversion_rate + '%') : '0.00%')}}</span><span class="txt">接待转化率</span>
              </div>
              <div class="noReception" v-else>
                <span class="txt">当日无接待记录</span>
              </div>
            </div>
        </div>
      </div>
      <div class="nodata" v-else>
        <p class="txt">暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Row, Col, DatePicker } from 'element-ui'
import ICountUp from 'vue-countup-v2'
import Panel from '@/components/panel.vue'
import Moment from 'moment'
// import { Message } from 'element-ui'
import { APIGmallReception } from '@/api/management.js'
// import Store2 from 'store2'
// import np from 'nprogress'
// import Config from '@/utils/config.js'

export default {
  name: 'guidelist',

  data () {
    return {
      currDate: Moment().format('YYYY-MM-DD'),
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() > Moment() || time.getTime() < Moment().subtract(1, 'year')
        },
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', Moment())
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const date = Moment().subtract(1, 'day')
              picker.$emit('pick', date)
            }
          }
        ]
      },
      // countUp 数字动态效果
      cuConfig: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.'
      },
      guideNum: '',
      receptNum: '',
      minutes: '',
      seconds: '',
      guideRate: '',
      guide_list: []
    }
  },
  components: {
    elRow: Row,
    elCol: Col,
    elDatePicker: DatePicker,
    // // 自定义组件
    countUp: ICountUp,
    aiPanel: Panel
  },
  created () {
    this.GetReception()
  },
  methods: {
    GetReception (date) {
      APIGmallReception({ shopId: this.$store.getters.mallId, date })
        .then((res) => {
          let table = res.data.salemans
          let analysisData = res.data.total
          this.guide_list = table
          this.guideNum = analysisData.saleman
          this.receptNum = analysisData.customer
          this.minutes = parseInt(analysisData.avg_time / 60)
          this.seconds = analysisData.avg_time % 60
          this.guideRate = analysisData.conversion_rate
        })
    },
    dateChanged (date) {
      const pickerDate = Moment(date).format('YYYY-MM-DD')
      this.GetReception(pickerDate)
    },
    selectItem (item) {
      // 如果有接待人数 才会发生跳转
      // if (item.reception_number > 0) {
      this.$router.push({ name: 'receptdetail', query: { id: item.id, date: Moment(this.currDate).format('YYYY-MM-DD') } })
      // }
    }
  },
  filters: {
    timeFormat (date) {
      return Moment(date).format('YYYY-MM-DD')
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
  .guideList{
    .number{
      .picker{
        text-align:right;
      }
      .guideInfo{
        .item{
          text-align: center;
          .detail{
            .num{
              font-size:36px;
            }
            .unit{
              font-size:14px;
            }
          }
          .txt{
            color: #888;
            font-size: 12px;
          }
        }
      }
    }
    .guiders{
      padding: 20px 20px 0px 20px;
      background-color: #ffffff;
      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
      .hasdata{
        display: flex;
        flex-wrap: wrap;
        .guidePerson{
          width: 32%;
          margin-right: 2%;
          margin-bottom: 20px;
          padding: 6px;
          box-sizing: border-box;
          border:1px solid rgb(221, 221, 221);
          &:nth-child(3n){
            margin-right: 0;
          }
          .left{
            .guideImg{
              width: 100px;
              height: 100px;
              float: left;
            }
          }
          .right{
            padding-top: 20px;
            padding-left: 120px;
            .guider{
              margin-bottom: 20px;
              .guideName{
                font-size: 16px;
                color: #000;
              }
              .guideNumber{
                color: #888;
                font-size: 12px;
              }
            }
            .reception{
              .n{
                font-size: 22px;
                margin-right: 5px;
              }
              .txt{
                font-size: 12px;
              }
            }
            .noReception{
              .txt{
                font-size: 12px;
              }
            }
          }
        }
        .highlight{
          &:hover{
            border-color: #006EFF;
          }
        }
      }
      .nodata {
        width: 100%;
        height:100px;
        .txt{
          text-align: center;
          padding-top: 20px;
        }
      }
    }
  }
</style>
